﻿<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery和CSS3响应式TAB选项卡样式幻灯片特效</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	
	<!--[if IE]>
		<script src="http://cdn.bootcss.com/html5shiv/3.6/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	
	<section class="htmleaf-container">
		<div class="landing-slider"> 
      
	      <!--tabSlider-->
	    <div class="tabSlider">
	    <div class="ts-items"> 
	          
	          <!-- Single item -->
	          <div class="ts-item is-active">
	        <div class="ts-banner"> <img src="img/621.jpg" alt="alt goes here" /> </div>
	        <div class="ts-container set-layout thumb-cont">
	              <div class="ts-thumbnail"> <img src="img/iphone.png" alt="alt" /> </div>
	              <div class="ts-content">
	            <div class="ts-title"> consectetur adipiscing elit </div>
	            <a href="" class="ts-btn pull-right set-icon to-right"> <span>Lorem ipsum dolor sit amet</span> <small>Quisque eget tincidunt erat</small> <i class="fa fa-arrow-circle-right"></i> </a> </div>
	            </div>
	      </div>
	          
	          <!-- Single item -->
	          <div class="ts-item">
	        <div class="ts-banner"> <img src="img/622.jpg" alt="alt goes here" /></div>
	        <div class="ts-container set-layout thumb-cont">
	              <div class="ts-thumbnail"> <img src="img/s3.png" alt="alt" /> </div>
	              <div class="ts-content">
	            <div class="ts-title"> Title </div>
	            <a href="" class="ts-btn pull-right set-icon to-right"> <span>Quisque eget tincidunt erat</span> <small>Donec dignissim consectetur</small> <i class="fa fa-arrow-circle-right"></i> </a> </div>
	            </div>
	      </div>
	          
	          <!-- Single item -->
	          <div class="ts-item">
	        <div class="ts-banner"> <img src="img/623.jpg" alt="alt goes here" /> </div>
	        <div class="ts-container set-layout thumb-cont">
	              <div class="ts-thumbnail"> <img src="img/lumia.png" alt="alt" /> </div>
	              <div class="ts-content">
	            <div class="ts-title"> Lorem ipsum dolor sit amet </div>
	            <a href="" class="ts-btn pull-right set-icon to-right"> <span>Donec dignissim consectetur</span> <small>Praesent at enim vel nibh</small> <i class="fa fa-arrow-circle-right"></i> </a> </div>
	            </div>
	      </div>
	        </div>
	    <nav class="ts-control">
	          <div class="ts-container">
	        <ul>
	              <li class="is-active"><i class="ts-icon auto"></i> <span>Slide 1</span></li>
	              <li><i class="ts-icon medical"></i> <span>Slide 2</span></li>
	              <li><i class="ts-icon food"></i> <span>Slide 3</span></li>
	            </ul>
	      </div>
	        </nav>
	  </div>
      <!--/tabSlider--> 
	</section>
	
	
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$('a').on('click', function(){ return false; }); 

		// set item banner
		$('.ts-item').first().show();
		$('.ts-item').each(function () {
		    var $this = $(this),
		        _imgSrc  = $this.find('.ts-banner img').attr('src');
		  
		    if(_imgSrc)
		    $this.css('background-image', 'url(' + _imgSrc + ')');
		});

		$('.ts-control li').on('click', function(){
		    var  $this = $(this),
		        _index = $this.index();

		      $("li.is-active").removeClass("is-active");
		      $(this).addClass("is-active");
		  
		      $('.ts-item.is-active').removeClass('is-active').fadeOut();
		      $('.ts-item').eq(_index).addClass('is-active').fadeIn();
		  
		    return false;
		});

		var ww = $(window).width();
	});
	</script>
</body>
</html>